
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>jQuery拖放插件DAD演示-指定拖动区域</title>
    <link rel="stylesheet" href="css/jquery.dad.css">
    <link rel="stylesheet" href="css/style.css">
    <style>
    	
    </style>
</head>

<body>
<h1>指定拖动区域</h1>

<div class="jq22">
    <div id="div_1213242323" class="item region region-shadow" style="width: 24%;">
        <div id="title_1213242323" class="title">
            <h4><i class="decorator"></i>标题 </h4>
            <p class="btn"><a href=""><img src="img/refresh.png"></a><a href=""><img src="img/edit.png"></a><a href=""><img src="img/close.png"></a></p>
        </div>
        <div id="content_1213242323" class="content" style="padding: 0;">
        	<div class="list">
            <ul class="new font14">
            	<li><a href=""><span class="slyc">列表列表列表新闻新闻新闻列表列表列表新闻新闻新闻</span> <span class="data">2018-10-16</span></a></li>
            	<li><a href=""><span class="slyc">列表列表列表新闻新闻新闻</span><span class="data">2018-10-16</span></a></li>
            	<li><a href=""><span class="slyc">列表列表列表新闻新闻新闻</span><span class="data">2018-10-16</span></a></li>
            	<li><a href=""><span class="slyc">列表列表列表新闻新闻新闻</span><span class="data">2018-10-16</span></a></li>
            	<li><a href=""><span class="slyc">列表列表列表新闻新闻新闻</span><span class="data">2018-10-16</span></a></li>
            </ul>
            </div>
        </div>
    </div>
    <div class="item item2 region region-shadow">
    	<div  class="title">
        <h4><i class="decorator"></i>标题 </h4>
        </div>
        <div class="content">
        	<div class="list list-pic">
        	<div class="pic">
        		<img src="img/default.jpg">
        	</div>
        	<ul class="new font14">
            	<li><a href=""><span class="slyc">列表列表列表新闻新闻新闻列表列表列表新闻新闻新闻</span> <span class="data">2018-10-16</span></a></li>
            	<li><a href=""><span class="slyc">列表列表列表新闻新闻新闻</span><span class="data">2018-10-16</span></a></li>
            	<li><a href=""><span class="slyc">列表列表列表新闻新闻新闻</span><span class="data">2018-10-16</span></a></li>
            	<li><a href=""><span class="slyc">列表列表列表新闻新闻新闻</span><span class="data">2018-10-16</span></a></li>
            	<li><a href=""><span class="slyc">列表列表列表新闻新闻新闻</span><span class="data">2018-10-16</span></a></li>
            </ul>
            </div>
        </div>
    </div>
    <div class="item item3 region region-shadow">
        <div  class="title">
        <h4><i class="decorator"></i>标题 </h4>
        </div>
        <div class="content">3</div>
    </div>
    <div class="item item4 region region-shadow">
        <div  class="title">
        <h4><i class="decorator"></i>标题 </h4>
        </div>
        <div class="content">4</div>
    </div>
    <div class="item item5 region region-shadow">
        <div  class="title">
        <h4><i class="decorator"></i>标题 </h4>
        </div>
        <div class="content">5</div>
    </div>
    <div class="item item6 region region-shadow">
        <div  class="title">
        <h4><i class="decorator"></i>标题 </h4>
        </div>
        <div class="content">
        	<div class="list list-pic">
        	<div class="pic">
        		<img src="img/default.jpg">
        	</div>
        	<ul class="new font14">
            	<li><a href=""><span class="slyc">列表列表列表新闻新闻新闻列表列表列表新闻新闻新闻</span> <span class="data">2018-10-16</span></a></li>
            	<li><a href=""><span class="slyc">列表列表列表新闻新闻新闻</span><span class="data">2018-10-16</span></a></li>
            	<li><a href=""><span class="slyc">列表列表列表新闻新闻新闻</span><span class="data">2018-10-16</span></a></li>
            	<li><a href=""><span class="slyc">列表列表列表新闻新闻新闻</span><span class="data">2018-10-16</span></a></li>
            	<li><a href=""><span class="slyc">列表列表列表新闻新闻新闻</span><span class="data">2018-10-16</span></a></li>
            </ul>
            </div>
        </div>
    </div>
    <div class="item item7 region region-shadow">
        <div  class="title">
        <h4><i class="decorator"></i>标题 </h4>
        </div>
        <div class="content">7</div>
    </div>
    <div class="item item8 region region-shadow">
        <div  class="title">
        <h4><i class="decorator"></i>标题 </h4>
        </div>
        <div class="content">8</div>
    </div>
    <div class="item item9 region region-shadow">
        <div  class="title">
        <h4><i class="decorator"></i>标题 </h4>
        </div>
        <div class="content">9</div>
    </div>
    <div class="item item10 region region-shadow">
        <div  class="title">
        <h4><i class="decorator"></i>标题 </h4>
        </div>
        <div class="content">10</div>
    </div>
</div>




<p class="jq22-explain">标题部分才可以拖放</p>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.dad.min.js"></script>
<script>
    $(function(){
        $('.jq22').dad({
            draggable: 'h4',
            callback: function () {
                alert($('.jq22').html());
            }
        });

    });
</script>









<!-- 以下信息与演示无关，可不必理会 -->
<!--<style>-->
    <!--body { margin: 0; border-left: 200px solid #ccc;}-->

    <!--h1 { width: 1000px; margin: 40px auto; font: 32px "Microsoft Yahei";}-->
    <!--.jq22 { width: 1000px; margin: 0 auto;}-->

    <!--.menu { position: absolute; left: 0; top: 0; bottom: 0; width: 200px; padding-top: 100px; font-family: Consolas,arial,SimSun; background-color: #ccc;}-->
    <!--.menu a { display: block; height: 40px; margin: 0 0 1px 2px; padding-left: 10px; line-height: 40px; font-size: 14px; color: #333; text-decoration: none;}-->
    <!--.menu a:hover { background-color: #eee;}-->
    <!--.menu .cur { color: #000; background-color: #fff !important;}-->

    <!--.explain, .jq22-explain { margin-top: 20px; font-size: 14px; text-align: center; color: #f50;}-->

    <!--.vad { margin: 50px 0 10px; font-family: Consolas,arial,宋体,sans-serif; text-align:center;}-->
    <!--.vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}-->
    <!--.vad a:hover { color: #fff; background-color: #000;}-->
    <!--.thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 40px solid transparent;}-->
<!--</style>-->



<!--<div class="menu">-->
    <!--<a href="index.html">1、水平拖放</a>-->
    <!--<a href="index2.html">2、垂直拖放</a>-->
    <!--<a href="index3.html">3、多行拖放</a>-->
    <!--<a class="cur" href="index4.html">4、指定拖动区域</a>-->
    <!--<a href="index5.html">5、回调函数</a>-->
    <!--<a href="index6.html">6、允许/禁止拖放</a>-->
    <!--<a href="index7.html">7、仿垃圾篓</a>-->
    <!--<a href="index8.html">8、仿购物车</a>-->
<!--</div>-->

</body>
</html>